<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('user.user.User name') + '/' + t('user.user.nickname') })"
        />

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" />

        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue'
import baTableClass from '/@/utils/baTable-j'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common-j'
import { useI18n } from 'vue-i18n'

defineOptions({
    name: 'user/user',
})

const { t } = useI18n()
const tableRef = ref()
const baTable = new baTableClass(new baTableApi('/admin/user.User/'), {
    column: [
        { type: 'selection', align: 'center', operator: false },
        { label: t('user.user.userId'), prop: 'userId', align: 'center' },
        {
            label: t('user.user.User name'),
            prop: 'username',
            align: 'center',
            operator: 'LIKE',
            operatorPlaceholder: t('Fuzzy query'),
            width: 120,
        },
        {
            label: t('user.user.openId'),
            prop: 'openId',
            align: 'center',
            operator: false,
        },
        {
            label: t('user.user.mobile'),
            prop: 'mobile',
            align: 'center',
            operator: 'LIKE',
            operatorPlaceholder: t('Fuzzy query'),
        },
        {
            label: t('user.user.faceAuth'),
            prop: 'faceAuth',
            align: 'center',
            render: 'tag',
            custom: { '0': 'danger', '1': 'success' },
            replaceValue: { '0': '未认证', '1': '已认证' },
            width: 100,
            operator: false,
        },
        {
            label: t('user.user.balance'),
            prop: 'money',
            align: 'center',
            operator: false,
            width: 120,
        },
        {
            label: t('user.user.rechargeAmt'),
            prop: 'rechargeAmt',
            align: 'center',
            operator: false,
            width: 120,
        },
        {
            label: t('user.user.grouping'),
            prop: 'groupName',
            align: 'center',
            operator: false,
            width: 120,
        },
        {
            label: t('user.user.membFlag'),
            prop: 'membFlag',
            align: 'center',
            render: 'tag',
            custom: { '00': '', '01': 'success' },
            replaceValue: { '00': '普通用户', '01': '年卡用户' },
            width: 100,
            operator: false,
        },
        {
            label: t('Create time'),
            prop: 'createTime',
            align: 'center',
            render: 'datetime',
            width: 160,
            operator: false,
        },
        {
            label: t('Operate'),
            align: 'center',
            width: '100',
            render: 'buttons',
            buttons: defaultOptButtons(['edit', 'delete']),
            operator: false,
        },
    ],
    dblClickNotEditColumn: [undefined],
})

baTable.mount()
baTable.getIndex()
baTable.table.showComSearch = true
provide('baTable', baTable)
</script>

<style scoped lang="scss"></style>
